<template>
  <Card class="ml-2 relative h-full">
    <div class="icon-gallery">
      <div @click="copyIconName(icon)" class="icon-item" v-for="(icon, index) in icons" :key="index">
        <span :class="icon" class="icon"></span>
        <div class="icon-name">{{ icon }}</div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, message } from 'ant-design-vue';
  import { GTree,GDetail,Glayout } from '../../../component';


  // 这里是你要展示的图标名称（根据实际使用的图标库调整）
  const icons = ref([
    'icon-[lucide--home]',
    'icon-[lucide--user]',
    'icon-[lucide--search]',
    'icon-[lucide--settings]',
    'icon-[lucide--bell]',
    'icon-[lucide--heart]',
    'icon-[lucide--star]',
    'icon-[lucide--bookmark]',
    'icon-[lucide--camera]',
    'icon-[lucide--trash]',
    'icon-[game-icons--player-base]',
    'icon-[ri--layout-line]',
    'icon-[healthicons--ui-menu-grid]',
    'icon-[iconamoon--type-fill]',
    'icon-[solar--text-field-focus-bold]',
    'icon-[solar--text-field-bold-duotone]',
    'icon-[solar--user-hands-bold]',
    'icon-[solar--user-hand-up-outline]',
    'icon-[icon-park-outline--update-rotation]',
    'icon-[material-symbols--delete-outline-rounded]',
    'icon-[clarity--file-group-solid]',
    'icon-[fa-solid--link]',
    'icon-[typcn--th-menu]',
    'icon-[material-symbols--dynamic-form]',
    'icon-[fluent-mdl2--text-field]'
  ]);

  // 复制图标名称
  const copyIconName = (iconName: string) => {
    navigator.clipboard.writeText(iconName)
      .then(() => {
        message.success(`已复制图标名称：${iconName}`);
      })
      .catch(err => {
        alert('复制失败，请手动复制');
        message.error(err);
      });
  };
</script>

<style scoped>
  .icon-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 每行 6 个图标 */
    gap: 20px;
    padding: 20px;
  }

  /* 浅色模式下的样式 */
  .icon-item {
    text-align: center;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .icon-item:hover {
    background-color: #e6f7ff;
    transform: scale(1.05);
  }

  .icon {
    font-size: 32px;
    color: #006be6;
  }

  .icon-name {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
  }

  /* 暗黑模式下的样式 */
  @media (prefers-color-scheme: dark) {
    .icon-item {
      background-color: #333;
      color: #f0f0f0;
    }

    .icon-item:hover {
      background-color: #444;
    }

    .icon-name {
      color: #ccc;
    }

    .icon {
      color: #79a7e7;
    }
  }
</style>
